//################################
// 版权所有：鸽子游戏俱乐部
// 系统名称：鸽子游戏俱乐部-移动版
// 文件名称：index.js
// 创建时间：2017年06月11日
// 创建人员：lemo
// 功能说明：方形Button组件
//################################

'use strict';

import React, {Component, PropTypes} from 'react';
import {
    Image,
    View,
    StyleSheet,
    Text,
    TouchableHighlight,
    TouchableWithoutFeedback,
    InteractionManager,
} from 'react-native';

import FontSizes from '../../common/fontSizes';
import Colors from '../../common/colors';
import Images from '../../images';

const BORDER_WIDTH = 0.4;

class RectButton extends Component {
    static propTypes = {
        icon: PropTypes.number,
        iteminfo: PropTypes.object,
        onPressItem: PropTypes.func,
        onPressTitle: PropTypes.func,
	}

    constructor(props) {
        super(props);

        this.onPressItem = this.onPressItem.bind(this);
        this.onPressTitle = this.onPressTitle.bind(this);

        this.state = {
            selected: false,
            borderColor: '#EAEAEA',
            imgstatus: Images.CartInactive,
        }
    }

    onPressItem() {
        InteractionManager.runAfterInteractions(() => {
            if (this.props.onPressItem) {
                if (!this.state.selected) {
                    this.setState({selected:true,borderColor: '#CDCD00',imgstatus:Images.CartActive});
                }
                else {
                    this.setState({selected:false,borderColor: '#EAEAEA',imgstatus:Images.CartInactive});
                }
                this.props.onPressItem(this.props.iteminfo.id);
            }
        });
    }

    onPressTitle() {
        InteractionManager.runAfterInteractions(() => {
            if (this.props.onPressTitle) {
                this.props.onPressTitle(this.props.iteminfo.name);
            }
        });
    }

    render() {
        return (
            <TouchableHighlight 
                underlayColor='#FBFBFB' 
                style={{borderRadius: 5,flex:1,}}
                onPress={this.onPressTitle}>
                <View style={{flexDirection:'row',flex:1,borderColor:this.state.borderColor,borderWidth:0.6,borderRadius:5,alignItems:'center'}}>
                    <View>
                        <Image source={this.props.icon} style={styles.renderrowimage} resizeMode={Image.resizeMode.contain} />
                    </View>
                    <View style={{paddingTop:20,paddingBottom:10,}}>
                        <View>
                            <Text style = {[styles.renderrowtext,{fontSize:12,color:'#428BCA'}]} numberOfLines={1}>{this.props.iteminfo.name}</Text>
                        </View>
                        <View>
                            <Text style = {styles.renderrowtext} numberOfLines={1}>{'语言：'}{this.props.iteminfo.language}</Text>
                        </View>
                        <View>
                            <Text style = {styles.renderrowtext} numberOfLines={1}>{'区域：'}{this.props.iteminfo.zone}</Text>
                        </View>
                        <View>
                            <Text style = {styles.renderrowtext} numberOfLines={1}>{'库存：'}{this.props.iteminfo.storage}</Text>
                        </View>
                        <View>
                            <Text style = {styles.renderrowtext} numberOfLines={1}>{'租借次数：'}{this.props.iteminfo.rents}</Text>
                        </View>
                    </View>
                    <View style={{position:'absolute',top:0,right:5,}}>
                        <TouchableWithoutFeedback onPress={this.onPressItem}>
                            <Image source={this.state.imgstatus} style={{width:26,height:24}} resizeMode={Image.resizeMode.contain} />
                        </TouchableWithoutFeedback>
                    </View>
                </View>
            </TouchableHighlight>
        );
    }
}

const styles = StyleSheet.create({
    renderrowimage: {
        width: 60,
        height: 85,
        margin: 3,
    },
    renderrowtext: {
        marginLeft: 5,
        fontSize: 10,
    },
});

export default RectButton;